﻿@using System;
@using CoralNode.CoralFile.Entity.Domains;
@using CoralNode.CoralFile.Entity.SearchOrders;
@using CoralNode.CoralFile.Entity.SearchQuerys;
@using Coralcode.Adapter.File.Utils;
@using CoralNode.Core.Entity.Domains.Site;
@using CoralNode.Core.Entity.Enums;
@using Coralcode.Base.Entity.SearchOrders;
@using CoralNode.CoralFile.Entity.Models;
@model string
@{
    System.IO.FileInfo fi = null;
    if (!Model.StartsWith("http://", true, System.Globalization.CultureInfo.InvariantCulture) && !Model.StartsWith("https://", true, System.Globalization.CultureInfo.InvariantCulture) && File.Exists(Server.MapPath(Model))) {
        fi = new FileInfo(Server.MapPath(Model));
    }
    
}
@{
    Layout = "";
}
<div id="upload_d">
    <div class="upload_d_t">
        裁切图片
    </div>
    @if (Model.StartsWith("http://", true, System.Globalization.CultureInfo.InvariantCulture) || Model.StartsWith("https://", true, System.Globalization.CultureInfo.InvariantCulture) || fi == null) {
        <div class="cutbox pb_2 pl_2">
            <div class="message">
                @if (Model.StartsWith("http://", true, System.Globalization.CultureInfo.InvariantCulture) || Model.StartsWith("https://", true, System.Globalization.CultureInfo.InvariantCulture)) { 
                    <span>该图片来自其他网络，不能进行剪切操作！</span>
                } else if (fi == null) { 
                    <span>该图片已经在服务器删除，您所看到的可能是浏览器缓存图片！您可以重新上传图片或选择其他在线图片！</span>
                }
            </div>
        </div>
        <div class="opbtnbox clearfix">
            <span class="btn btn_green_normal w_8 okbtn">确定</span><span class="btn pl_2 cancelbtn">取消</span>
        </div>
        <script>
            $(function () {
                $("#upload_d  .opbtnbox .btn").click(function (e) {
                    e.preventDefault();
                    var d_outer = $("#upload_d").parents(".d-outer");
                    var dialog = d_outer.data("cutDialog");
                    dialog.close();
                })
            })
        </script>
    } else {
       
        <div id="imgselectarea" style="position: relative;">
        </div>
        <div class="cutbox clearfix">
            <div class="clearfix">
                <div class="item">
                    <div id="loadImage">
                        <img src="@Model?t=@DateTime.Now.ToString("yyyyMMddHHmmssfff")" id="loadedImage" />
                        <div class="tipmessage">
                            &nbsp;&nbsp;&nbsp;尺寸：<span class="js_imageinfo"></span><br />
                            &nbsp;&nbsp;&nbsp;大小：@Coralcode.Adapter.File.Utils.FileUtil.FormatSize(Convert.ToInt32(fi.Length))
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div id="loadImage1">
                        <img src="@Model" />
                    </div>
                    <strong class='thumImage'>尺寸：120×160</strong>
                </div>
                <div class="item">
                    <div id="loadImage2">
                        <img src="@Model" />
                    </div>
                    <strong class='thumImage'>尺寸：90×120</strong>
                </div>
                <div class="item">
                    <div id="loadImage3">
                        <img src="@Model" />
                    </div>
                    <strong class='thumImage'>尺寸：60×80</strong>
                </div>
                <img src="@Model" id="oraginalImg" style="display:none;" />
                <input type="hidden" id="imagePath" value="@Model" />
            </div>
            <div class=" form_main  table_form ">
                <table>
                    <tr>
                        <td width="60">标题：</td>
                        <td>
                            <input type="text" class="text w_41" />
                        </td>
                    </tr>
                    <tr>
                        <td>描述：</td>
                        <td>
                            <textarea class="textarea w_41 h_5-5"></textarea></td>
                    </tr>
                </table>
            </div>
        </div>
        <div class="opbtnbox clearfix">
            <span class="btn btn_green_normal w_8 okbtn">确定</span><span class="btn pl_2 cancelbtn">取消</span>
        </div>
      
        <script src="/Themes/CoralAdmin/_misc/scripts/jquery.imgareaselect/scripts/jquery.imgareaselect.min.js"
            type="text/javascript"></script>
        <script type="text/javascript">
            $(function () {
                var $tipMessage = $("#upload_d .tipmessage");
                if ($tipMessage.height() > 45)
                    $tipMessage.remove();

                var $loadedImage = $("#loadedImage");

                document.getElementById("loadedImage").onload = function () {
                    var oraginalImg = $("#oraginalImg");
                    $("#upload_d .js_imageinfo").text(oraginalImg.width() + "x" + oraginalImg.height());

                    var imgSec = null;
                    var imageMsg = {};
                    if (imgSec != null) {
                        imgSec.cancelSelection();
                    }

                    var x1, x2, y1, y2;

                    if ($loadedImage.width() && $loadedImage.height()) {
                        x1 = $loadedImage.width() * 0.2;
                        x2 = $loadedImage.width() * 0.8;
                        y1 = $loadedImage.height() * 0.2;
                        y2 = $loadedImage.height() * 0.8;
                    } else {
                        x1 = 10;
                        y1 = 10;
                        x2 = 50;
                        y2 = 50;
                    }
                    imageMsg.x = Math.floor(x1);
                    imageMsg.y = Math.floor(y1);
                    imageMsg.width = Math.floor(x2 - x1);
                    imageMsg.height = Math.floor(y2 - y1);

                    imgSec = $loadedImage.imgAreaSelect({
                        instance: true,
                        minHeight: 4,
                        minWidth: 3,
                        x1: x1,
                        y1: y1,
                        x2: x2,
                        y2: y2,
                        aspectRatio: "3:4",
                        parent: $("#imgselectarea"),
                        handles: true,
                        onSelectChange: preview,
                        onSelectEnd: function (img, selection) {
                            var oraginalImg = $("#oraginalImg");
                            var rate = oraginalImg.width() / $("#loadImage img").width();
                            imageMsg.width = Math.ceil(selection.width * rate);
                            imageMsg.height = Math.ceil(selection.height * rate);
                            imageMsg.x = Math.ceil(selection.x1 * rate);
                            imageMsg.y = Math.ceil(selection.y1 * rate);
                        }
                    });

                    function preview(img, selection) {
                        preViewAll($("#loadImage1 > img"), img, selection, 120, 160);
                        preViewAll($("#loadImage2 > img"), img, selection, 90, 120);
                        preViewAll($("#loadImage3 > img"), img, selection, 60, 80);
                    }

                    function preViewAll(jObj, img, selection, width, height) {
                        var scaleX = width / (selection.width || 1);
                        var scaleY = height / (selection.height || 1);
                        jObj.css({
                            width: Math.round(scaleX * $(img).width()) + 'px',
                            height: Math.round(scaleY * $(img).height()) + 'px',
                            marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
                            marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
                        });
                    }

                    var d_outer = $("#upload_d").parents(".d-outer");
                    var dialog = d_outer.data("cutDialog");
                    var param = d_outer.data("param");
                    

                    $("#upload_d .cancelbtn").click(function(e) {
                        e.preventDefault();
                        dialog.close();
                    });

                    $("#upload_d .okbtn").click(function (e) {
                        e.preventDefault();
                        var title = $("#upload_d .cutbox .table_form input[type='text']").val();
                        var description = $("#upload_d .cutbox .table_form textarea").val();
                        var json = { x: imageMsg.x, y: imageMsg.y, width: imageMsg.width, height: imageMsg.height, title: title, description: description, filepathstr: $("#imagePath").val() };
                        $.post("/m/file/savecutimage", json, function (data) {
                            if (data.Success) {
                                $.alert("图片裁切成功！");
                                if (param.okfun != null && param.okfun != "") {
                                    var jsonObj = { filePath: data.Path, title: title, description: description };
                                    if (typeof (param.okfun) === "function") {
                                        param.okfun(jsonObj);
                                    }
                                    else if (typeof (eval(param.okfun)) === "function") {
                                        eval(param.okfun + "(jsonObj)");
                                    }

                                }
                                else
                                    d_outer.data("path", jsonObj);
                            }
                            else
                                $.alert("图片裁切失败！");
                        });

                        dialog.close();
                    })
                }
            })
        </script>
        <link href="/Themes/CoralAdmin/_misc/scripts/jquery.imgareaselect/css/imgareaselect-default.css"
            rel="stylesheet" />
       
        
    }
</div>
